<template>
  <view class="order-appeal-modal">
    <up-popup v-model:show="show" overlay safeAreaInsetBottom safeAreaInsetTop mode="bottom" touchable maxHeight="'80%'"
      closeable closeOnClickOverlay @close="close" @open="open">
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">申诉详情表</view>
        </view>

        <!-- 加载状态 -->
        <view v-if="loading" class="loading-container">
          <up-loading-icon mode="spinner" size="40"></up-loading-icon>
          <text class="loading-text">加载中...</text>
        </view>

        <!-- 无记录提示 -->
        <view v-else-if="!auditLogsList.length" class="empty-container">
          <text class="empty-text">暂无审核记录</text>
        </view>

        <!-- 审核记录列表 -->
        <scroll-view v-else scroll-y="true" class="audit-logs-scroll" @scrolltolower="loadMore">
          <up-steps :current="auditLogsList.length" direction="column">
            <up-steps-item 
              v-for="(log, index) in auditLogsList" 
              :key="index"
              :error="log.handleStatus === 2"
              :title="getStatusText(log.handleStatus)" 
              :desc="formatDateTime(log.handleTime)">
              <template #content>
                <text class="appeal-processor">{{ log.handleUserName || '系统' }}</text>
                <text class="appeal-title">{{ formatDateTime(log.createTime) }}</text>
                <text v-if="log.remark" class="appeal-desc">{{ log.remark }}</text>
                <text v-if="log.handleUserPhone" class="appeal-phone">联系电话：{{ log.handleUserPhone }}</text>
              </template>
            </up-steps-item>
          </up-steps>

          <!-- 加载更多提示 -->
          <view v-if="loadingMore" class="loading-more">
            <up-loading-icon mode="spinner" size="20"></up-loading-icon>
            <text class="loading-more-text">加载更多...</text>
          </view>

          <!-- 没有更多数据提示 -->
          <view v-else-if="!hasMore && auditLogsList.length > 0" class="no-more">
            <text class="no-more-text">没有更多数据了</text>
          </view>
        </scroll-view>
      </view>
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { getOrderAppealLogs } from '@/api';

defineOptions({ name: "OrderAppealModal" });

// Props
interface Props {
  bizCode?: string;
}

const props = withDefaults(defineProps<Props>(), {
  bizCode: ''
});

const show = defineModel<boolean>("show", { default: false });

// 审核记录相关状态
const auditLogsList = ref<any[]>([]);
const loading = ref(false);
const loadingMore = ref(false);
const hasMore = ref(true);
const pageNum = ref(1);
const pageSize = ref(10);

// 获取审核记录列表
const fetchAuditLogs = async (isLoadMore = false) => {
  if (!props.bizCode) return;
  
  try {
    if (isLoadMore) {
      loadingMore.value = true;
    } else {
      loading.value = true;
      pageNum.value = 1;
      auditLogsList.value = [];
    }
    
    const response = await getOrderAppealLogs({
      bizCode: props.bizCode,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    });
    
    if (response.success) {
      const newRecords = response.data.records || [];
      
      if (isLoadMore) {
        auditLogsList.value = [...auditLogsList.value, ...newRecords];
      } else {
        auditLogsList.value = newRecords;
      }
      
      // 判断是否还有更多数据
      const total = response.data.total || 0;
      const currentTotal = auditLogsList.value.length;
      hasMore.value = currentTotal < total;
      
    } else {
      uni.showToast({
        title: response.message || '获取审核记录失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('获取审核记录失败:', error);
    uni.showToast({
      title: '获取审核记录失败',
      icon: 'none'
    });
  } finally {
    loading.value = false;
    loadingMore.value = false;
  }
};

// 加载更多
const loadMore = () => {
  if (loadingMore.value || !hasMore.value) {
    return;
  }
  
  pageNum.value += 1;
  fetchAuditLogs(true);
};

// 格式化时间
const formatDateTime = (timestamp: number | string) => {
  if (!timestamp) return '';
  const date = new Date(timestamp);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 0:
      return '待处理';
    case 1:
      return '申诉成功';
    case 2:
      return '申诉失败';
    default:
      return '未知状态';
  }
};

// 监听弹窗显示状态，自动获取数据
watch(show, (newVal) => {
  if (newVal && props.bizCode) {
    fetchAuditLogs();
  }
});

// 监听bizCode变化，重新获取数据
watch(() => props.bizCode, (newVal) => {
  if (newVal && show.value) {
    fetchAuditLogs();
  }
});

const open = () => {
  show.value = true;
}

const close = () => {
  show.value = false;
}  
</script>

<style scoped lang="scss">
.order-appeal-modal {
  .modal-header {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }

  .modal-content {
    padding: 20rpx;
    height: 100%;
    display: flex;
    flex-direction: column;

    .loading-container, .empty-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 400rpx;
    }

    .loading-text, .empty-text {
      margin-top: 20rpx;
      color: #666;
      font-size: 28rpx;
    }

    .audit-logs-scroll {
      flex: 1;
      height: 600rpx;
    }

    .appeal-processor {
      font-size: 24rpx;
      color: #606266;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .appeal-title {
      font-size: 24rpx;
      color: #909193;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .appeal-desc {
      font-size: 26rpx;
      color: #606266;
      display: block;
      margin-bottom: 8rpx;
    }

    .appeal-phone {
      font-size: 24rpx;
      color: #007aff;
      display: block;
    }

    .loading-more, .no-more {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30rpx;
    }

    .loading-more-text, .no-more-text {
      margin-left: 16rpx;
      color: #666;
      font-size: 28rpx;
    }
  }
}
</style>
